<template>
    <div class="report-four">
        <div class="header"></div>
        <div class="body">
            <h4>
                <span>04</span>各试题得分情况
            </h4>
            <div class="title">共{{reportFour.quesCount}}道题，总分{{reportFour.score}}分，个人得分{{reportFour.stuScore}}分</div>
            <p class="allscore">总平均分<span>{{reportFour.avg}}</span></p>
            <div class="sort">
                <!-- <ul>
                    <li v-for="item in reportFour.quesList" :class="{active:item.sort==currentSort}" @click="changeQues(item)">
                        <span >{{item.sort}}</span>
                        <i v-if="item.getScore!==item.score"></i>
                    </li>
                </ul> -->
                <swiper :options="swiperOption" ref="swiper-tip" class="sort-swiper">
                    <swiper-slide v-for="(list,index) in (Math.ceil(reportFour.quesList.length/14))" :key="index">
                         <ul>
                            <li v-for="item in reportFour.quesList.slice(index*14,(index+1)*14)" :class="{active:item.sort==currentSort}"  @click="changeQues(item)">
                                <span >{{item.name||item.sort}}</span>
                                <i v-if="item.getScore!==item.score"></i>
                            </li>
                        </ul>
                    </swiper-slide>
                    <div class="swiper-pagination"  slot="pagination" v-if="reportFour.quesCount>14"></div>
                    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div> -->
                    <!-- <div class="prev"></div>
                    <div class="next"></div> -->
                </swiper>
            </div>
            <div class="info">
                <p>题型：{{infoQues.quesType}}</p>
                <ul>
                    <li>分值：{{infoQues.score}}分</li>
                    <li>得分：{{infoQues.getScore}}分</li>
                    <li>平均得分率：{{infoQues.scoringRate*1000000000000/10000000000}}%</li>
                    <li>
                        难易度：
                        <div class="img-star" v-for="item in star ">
                            <img src="../../assets/img/yellow-star.png" alt="" v-if="item<=infoQues.hard">
                            <img src="../../assets/img/gray-star.png" alt="" v-else>
                        </div>

                    </li>
                    <li>知识点：
                        <span>{{infoQues.know}}</span>
                    </li>
                    <li v-if="infoQues.remark">同类题型训练：
                        <span>{{infoQues.remark}}</span>
                    </li>
                </ul>
            </div>
                <!-- <div class="next-div"> -->
                    <next />
                <!-- </div> -->
                <div class="footer">
                    <logo />
                </div>
        </div>

    </div>
</template>
<script>
import Logo from '../common/Logo.vue'
import Next from '../common/Next.vue'

import io from '../../lib/io'
import util from '../../lib/util'
export default {
    components: {
        Logo,
        Next,
    },

    data() {
        return {
            currentSort:1,
            reportId:'',
            sysCode:"",
            reportFour:{
                quesCount:0,
                quesList:[]
            },
            infoQues:{},
            star:[1,2,3,4,5],
            swiperOption:{
                slidesPerView :1,
                pagination :'.swiper-pagination',
                // prevButton:'.swiper-button-prev',
                // nextButton:'.swiper-button-next',
                setWrapperSize :true,

            }
        }
    },
    created(){
        this.reportId = this.$route.query.reportId
        this.sysCode = util.getSysCode(this.$route.query.areamTeamId)

        this.$nextTick(()=>{
            this.reportQues()
        })
    },
    methods:{
        reportQues(){
            let param = {
                reportId:this.reportId,
                sysCode:this.sysCode
            }
            io.post(io.reportQues,param,(ret)=>{
                if(ret.success){
                    this.reportFour = ret.data
                    this.infoQues = ret.data.quesList[0]
                    this.currentSort = ret.data.quesList[0].sort
                    // console.log(ret)
                }else{
                    alert(ret.desc)
                }
            })
        },
        changeQues(row){
            this.currentSort = row.sort
            this.infoQues = row
        }
    }
}
</script>
<style lang="less" scoped>
.report-four {
    height: 100%;
    background: #edf5ff;
    position: relative;
    -webkit-overflow-scrolling: touch;
    .header {
        height: 2.5rem;
        background: url('../../assets/img/rep-bg.png');
    }
}

.body {
    background: white;
    width: 90%;
    margin-left: 5%;
    min-height: 90vh;
    position: absolute;
    top: 3vh;
    border-radius: 0.1rem;
    margin-bottom: 0.6rem;
    box-shadow: 0px 5px 18px 0px rgba(189, 217, 253, 0.5);
    -webkit-overflow-scrolling: touch;
    h4 {
        height: 0.4rem;
        font-size: 0.4rem;
        line-height: 0.4rem;
        font-weight: normal;
        color: #ff7853;
        margin-top: 0.4rem;
        margin-left:0.44rem;
        margin-bottom: 0.5rem;
        span {
            font-size:0.52rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: normal;
            display: inline-block;
            color: #74a5e1;
            padding-right: 0.22rem;
            border-right: 3px solid #74a5e1;
            font-weight: 100;
            float: left;
            margin-right: 0.2rem;
        }
    }
    .title{
        margin-left:0.44rem;
        font-size:0.28rem;
        color:#333;
        height:0.28rem;
        line-height:0.28rem;


    }
    .allscore{
        margin-left:0.44rem;
        margin-top:0.24rem;
        font-size:0.28rem;
        span{
            color:#ff5501;
        }
    }
    .sort{
        // margin-top:0.4rem;
        margin:0.4rem 0.1rem 0;
        padding:0.3rem 0.3rem 0.2rem 0.3rem;
        // height:2.24rem;
        box-sizing: border-box;
        border-top:1px solid #edeced;
        border-bottom: 1px solid #edecec;
        .sort-swiper{
            padding-bottom:0.1rem;
            box-sizing: border-box;
        }
        ul{
            // display:flex;
            clear: both;
            overflow: hidden;
            li{
                // flex:1;
                // float: left;
                display:inline-block;
                width:0.68rem;
                height:0.68rem;
                line-height: 0.68rem;
                border-radius: 50%;
                text-align:center;
                font-size:0.28rem;
                color:#333;
                position: relative;
                margin-right:0.19rem;

                &.active{
                    background-color:#3271f1;
                    color:#fff;
                    i{
                        background-color:#fff;
                    }
                }
                i{
                    display:block;
                    position:absolute;
                    left:50%;
                    top:73%;
                    transform: translateX(-50%);
                    width:0.1rem;
                    height:0.1rem;
                    border-radius:50%;
                    background-color:#ffa60e;
                    // color:#ffa60e;

                }
                &:nth-child(7n){
                    margin-right:0;
                }
            }
            li+li{
                // margin-left:0.19rem;
                margin-bottom:0.2rem;
            }
        }
    }
    .info{
        margin-left:.4rem;
        margin-top:0.58rem;
        p{
            margin-left:0;
            color:#74a5e1;
            font-size: 0.28rem;
            font-weight: 700;

        }
        ul{
            margin-top:0.37rem;
            li{
                font-size:0.28rem;
                color:#333;
                height:0.28rem;
                line-height: 0.28rem;
                margin-bottom:0.34rem;
                span{
                    color:#ff5501;
                    word-break: break-all;
                    line-height: .4rem;
                }
            }
        }
        .img-star{
            display:inline-block;
            vertical-align:top;
            margin-right:0.1rem;
        }
    }
}
    .footer {
        position: absolute;
        bottom: -0.57rem;
        width: 100%;
        text-align: center;
    }
</style>
<style lang="less">
.report-four{
    .sort{
        .swiper-slide{
            background-color:#fff;
            // margin-right:0.1rem;
            // margin-left:0.2rem;
        }
        .swiper-button-next{
            background:url('../../assets/img/left-tip.png') no-repeat;
            right: 0px;
            outline: none
        }
        .swiper-button-prev{
            background:url('../../assets/img/right-tip.png') no-repeat;
            left:0;
            outline: none
        }
        .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
            bottom:-0.1rem;
        }
        .swiper-pagination-bullet{
            width:0.16rem;
            height:0.16rem;
        }
        .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
            margin:0 0.1rem;
        }
    }
}

</style>
